<template>
<div class="bi-toast toast" :class="boxClass" >
    <div class="toast-header">
        <bi-icon class="toast-icon" v-if="icon" :data="icon"></bi-icon>
        <strong class="me-auto">{{title}}</strong>
        <small>{{timeLabel}}</small>
        <button type="button" class="btn-close" @click="handleClose" v-if="closeable"></button>
    </div>
    <div class="toast-body">
        {{text}}
    </div>
</div>
</template>

<script>
import BiIcon from 'icon.vue';
export default{
    components:{
        BiIcon
    },
    data(){
        return {
            timeLabel:'',
            timer:null,
            autoCloseTimer:null,
            _dom:null
        }
    },
    props:{
        time:{
            type:Number,
            default:0
        },
        title:{
            type:String,
            default:'提醒'
        },
        text:{
            type:String,
            default:""
        },
        icon:{
            type:String,
            default:''
        },
        position:{
            type:String,
            default:'top-right'
        },
        type:{
            type:String,
            default:''
        },
        autoClose:{
            type:Number,
            default:1000
        },
        closeable:{
            type:Boolean,
            default:true
        },
        callback:{
            type:Function,
            default:()=>{}
        }
    },
    computed:{
        boxClass(){
            let className = [];
            if (this.type) className.push('text-bg-'+this.type);
            className.push('show');
            return className;
        }
    },
    methods:{
        handleClose(){
           
            this.remove();
        },
        remove(){
            clearInterval(this.timer);
            clearInterval(this.autoCloseTimer);
            if (typeof this.callback =='function') this.callback();
            this.$el.classList.remove('toshow');

            setTimeout(() => {
                this._dom.remove();
            }, 1000);

        },
        show(){
            setTimeout(()=>{
                this.$el.classList.add('toshow');
            },10) ;

            if (this.autoClose!==0){
                this.autoCloseTimer = setInterval(()=>{
                    this.remove();
                },this.autoClose);
            }
            
            if (this.time!==0){
               this.timer =  setInterval(()=>{
                    let interval  = parseInt( (new Date().getTime() - this.time) / 1000);

                    switch(true){
                        case interval < 60:
                            this.timeLabel = `${interval}秒前`;
                        break;
                        case interval < 3600:
                            this.timeLabel = `${Math.floor(interval/60)}分钟前`;
                        break;
                        case interval < 86400:
                            this.timeLabel = `${Math.floor(interval/3600)}小时前`;
                        break;
                        default:
                            this.timeLabel = `${Math.floor(interval/86400)}天前`;
                            break;
                    }

                },10000)
            }
            
        }
    }
}
</script>


<style>

.bi-toast-wrapper{
    position: absolute;
    z-index: 2000;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction:column-reverse;
}

.bi-toast{
    opacity: 0;
    transition: all 0.5s;
    transform: translateY(100%);
    margin-bottom: 10px;
}
.bi-toast .toast-icon{
    margin-right: 5px;
}
.bi-toast.toshow{
    opacity: 1;
    transform: translateY(0);
}

</style>